---
id: rating-group
title: Rating Group
description: Allows users to rate items using a set of icons.
---

<ComponentPreview id="RatingGroup" />

## Anatomy

To set up the rating correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="rating-group" />

## Examples

Learn how to use the `RatingGroup` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Using half ratings

Allow `0.5` value steps by setting the `allowHalf` prop to `true`. Ensure to render the correct icon if the `isHalf`
value is set in the Rating components render callback.

<Example id="half-ratings" />

### Using a default value

<Example id="initial-value" />

### Controlled

When using the `RatingGroup` component, you can use the `value` and `onValueChange` props to control the state.

<Example id="controlled" />

### Disabling the rating group

To make the rating group disabled, set the `disabled` prop to `true`.

<Example id="disabled" />

### Readonly rating group

To make the rating group readonly, set the `readOnly` prop to `true`.

<Example id="read-only" />

### Usage within forms

To use the rating group within forms, pass the prop `name`. It will render a hidden input and ensure the value changes
get propagated to the form correctly.

<Example id="form-usage" />

### Using the Field Component

The `Field` component helps manage form-related state and accessibility attributes of a rating group. It includes
handling ARIA labels, helper text, and error text to ensure proper accessibility.

<Example id="with-field" />

### Using the Root Provider

The `RootProvider` component provides a context for the rating-group. It accepts the value of the `useRating-group`
hook. You can leverage it to access the component state and methods from outside the rating-group.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="rating-group" />

### Context

These are the properties available when using `RatingGroup.Context`, `useRatingGroupContext` hook or `useRatingGroup`
hook.

<ContextType id="rating-group" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="rating-group" />
